<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>淘票票登录</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
    <script type="text/javascript" th:src="@{/js/jquery-3.4.1.js}"></script>
    <script type="text/javascript" th:src="@{/js/message.js}"></script>
</head>
<body>
<div class="login-div">
    <h1>淘票票登录</h1>
    <form id="login-form">
        <div class="login-form-item">
            <input name="username" id="username" placeholder="用户名">
        </div>
        <div class="login-form-item">
            <input name="password" id="password" type="password" placeholder="密码">
        </div>
        <div class="login-form-item">
            <input name="code" placeholder="验证码" id="code">
            <a href="javascript:refreshCode()"><img th:src="@{/checkCode}" id="vcode"></a>
        </div>
        <button class="btn-login" type="button" onclick="login()">登录</button>
    </form>
    <div class="form_bottom">
        <a th:href="@{/register}">免费注册</a>
    </div>
</div>

<script>
    function refreshCode() {
        let vcode = document.getElementById("vcode");
        vcode.src = "http://localhost:8080/checkCode?time" + new Date().getTime();
    }
    function login(){
        let username=$('#username').val();
        if (username==null||username==""){
            $.message({
                duration:'2000',
                type:'error',
                message:'用户名不能为空'
            })
            return this;
        }
        let password=$('#password').val();
        if (password==null||password==""){
            $.message({
                duration:'2000',
                type:'error',
                message:'密码不能为空'
            })
            return this;
        }
        let code=$('#code').val();
        if (code==null||code==""){
            $.message({
                duration:'2000',
                type:'error',
                message:'验证码不能为空'
            })
            return this;
        }
        $.ajax({
            url:'http://localhost:8080/user/login',
            method:'post',
            data:{username:username,password:password,code:code},
            dataType:'json',
            success:function (res) {
                if (res.code==200){
                    window.location.href="http://localhost:8080/";
                }
                if (res.code==204){
                    $.message({
                        duration:'2000',
                        type:'error',
                        message:'用户名或密码不正确！'
                    })
                    setTimeout(function () {
                        window.location.reload();
                    },2000)
                }
                if (res.code==400){
                    $.message({
                        duration:'2000',
                        type:'error',
                        message:'验证码不正确'
                    })
                    refreshCode();
                }
                console.log(res);
            }
        })
    }
</script>
</body>
</html>